<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="text/javascript" src="easeljs-0.7.1.min.js"></script>
	<script type="text/javascript" src="tweenjs-0.5.1.min.js"></script>
	<title></title>
</head>
<body onload="init()">
	<canvas id="mycanvas" width="500px" height="400px" style="border:1px solid #ccc"></canvas>

</body>
</html>

<script type="text/javascript">
	var stage;
	function init(){
		stage = new createjs.Stage(document.getElementById('mycanvas'));
		createjs.Ticker.setFPS(60);
		createjs.Ticker.addEventListener('tick',function(){
			stage.update();

		})

		sample()
	}

	function sample(){
		var container = new createjs.Container();
		var txt = new createjs.Text("Green Pepper","20px Arial","#000")
		var pepper = new createjs.Bitmap("pepper.png")
		var bg = new createjs.Shape(new createjs.Graphics().beginStroke().drawRect(0,0,250,250))
		txt.x = txt.y = 10;
		pepper.x = pepper.y = 80;
		container.regX = container.regY = 125;
		container.x = 300;
		container.y = 200;
		container.addChild(txt,pepper,bg);
		stage.addChild(container)
		createjs.Tween.get(container).to({rotation:720},4000)

	}
	
</script>